<script setup>
import {onMounted, ref, toRefs, watch} from "vue";
import {useStore} from "vuex";
import {setupMapActions, setupMapState} from "@/assets/js/vuexUtils";
import {ElementUtils} from "@/assets/js/ElementUtils";

const {privilegeList} = setupMapActions("Thread", ['privilegeList'])
const {currentUid} = setupMapState("Account", ['currentUid']);

const props = defineProps({
  fid: {type: Number},
})
const store = useStore();
const {fid} = toRefs(props)
const data = ref();

const pattern = /<a href='\/nuke\.php\?func=ucp&uid=(\d+)'>(.+?)<\/a>/g

const request = (fid, force) => {
  const loading = ElementUtils.loading({target: "#privilege",});
  return privilegeList({fid, force}).then(res => {
    data.value = res.replace(pattern, `<a href='/user/$1?account=${currentUid.value}' target="_blank">$2</a>`)
  }).finally(() => {
    loading.close;
  });
}


onMounted(() => {
  setTimeout(() => {
    request(fid.value)
  }, 10)
})

watch(fid, (nv) => {
  request(nv)
})

</script>

<template>
  <div id="privilege" v-html="data">
  </div>
</template>

<style scoped>
#privilege {
  min-height: 100px;
}
</style>